import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios';


class Com extends Component {
  constructor (props) {
    super (props)
    this.state = {
      dat:[]
    }
  }
  componentDidMount () {
    Axios.get('https://sun.daxunxun.com/api/food')
    .then(data => {
      this.setState({
        dat:data.data
        
      })
    })
  }
  goDetail (fid) {
    this.props.history.push('/detail/' + fid)
  }
    render () {
      const dat = this.state.dat
      let pop = [];
      for (let i in dat ) {
        // console.log(dat[i])
        let fid = dat[i].f_id
        if (i<12) {
          pop.push(
            <li key={dat[i].f_id} onClick={ this.goDetail.bind(this, fid)}>
              <div className="popImg">
                <img src = {dat[i].banner} alt=""/>
              </div>
              <p  key={dat[i].f_id}>{dat[i].name}</p>
             
            </li>
          )
        }
      }
      return (
        <div className="Home_Foot">
          <div className="Home_Foot_nav">
            <h1>时令食材</h1>
            <Link to=""><span>全部</span></Link>
          </div>
          <ul>
            {
              pop
            }

          </ul>

      </div>
      )
    }
}


export default Com;